<template>
  <view class="container" @click="navigatorSearch()">
    <view class="search-container" :style="{'background-color': bgColor}">
      <view class="search-button" :style="{'border-radius': borderR}">
        <uni-icons :type="iconType" size="16"></uni-icons>
        <text>{{placeholder}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  var utils = require('../../common/tools.js')
  export default {
    name: "my-search",
    props: {
      // 背景颜色
      bgColor: {
        type: String,
        default: '#C00000'
      },
      // 圆角
      borderR: {
        type: String,
        default: '60rpx'
      },
      // 图标
      iconType: {
        type: String,
        default: 'search'
      },
      // 文本
      placeholder: {
        type: String,
        default: '搜索'
      },
      // 跳转的页面
      switchUrl: {
        type: String,
        default: '/subPackages/goods-search/goods-search'
      }
    },
    data() {
      return {

      };
    },
    methods:{
      // 跳转到搜索页面
      navigatorSearch() {
        utils._navigatorTo(this.switchUrl)
      }
    }
  }
</script>

<style lang="scss">
  .container {
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .search-container {
    display: flex;
    align-items: center;
    height: 80rpx;
    // background-color: #C00000;
    padding: 0 24rpx;

    .search-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      background-color: #fff;
      height: 60rpx;
      border-radius: 60rpx;
      font-size: 12px;

      text {
        margin-left: 10rpx;
      }
    }
  }
</style>
